<template>
  <div>
    <div class="flexrowbetween flexwrapper" style="align-items: flex-start">
      <div class="flex">
        <div
          class="iconbox flexcenter commhover blackbg mr_10"
          @click="resetQuery"
        >
          <i class="el-icon-refresh f-20" :class="{ rotate: isrefresh }"></i>
        </div>
        <el-button plain type="danger" :disabled='multiple' size="mini" @click="handleDelete">删除</el-button>
      </div>
      <div>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="0"
        >
          <el-form-item prop="name">
            <el-input
              class="searchinput"
              v-model="queryParams.name"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item class="mr_0">
            <el-dropdown trigger="click">
              <el-button size="mini" class="nor_border plr_9">
                <svg-icon class-name="f-14" icon-class="listicon" />
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <div class="dropbody">
                  <el-checkbox-group
                    v-model="checkedOption"
                    class="flexcolumn"
                    @change="changeSelect"
                  >
                    <el-checkbox
                      v-for="(item, index) in selectoptions"
                      :label="item.label"
                      :key="index"
                      class="m_5"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <el-dropdown trigger="click" @command="handleCommand">
              <el-button size="mini" class="nol_border plr_9">
                <svg-icon class-name="f-14" icon-class="export" />
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in exportlist"
                  :key="index"
                  :command="item.id"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <el-button
              class="f-14"
              type=""
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            ></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      border
      ref="tablelayout"
      class="commtable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        label="ID"
        prop="id"
        v-if="recordOption.includes('ID')"
      ></el-table-column>
      <el-table-column
        v-if="recordOption.includes('状态')"
        label="状态"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <el-tag type="success" class="tag_success">{{ scope.row.status }}已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="订单号"
        prop="platName"
        width="200"
        align="center"
        v-if="recordOption.includes('订单号')"
      >
        <template slot-scope="scope">
          {{ scope.row.platName }} 202303131232498459
        </template>
      </el-table-column>
      <el-table-column
        v-if="recordOption.includes('会员')"
        label="会员"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.activeid }} 旗舰版</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="recordOption.includes('昵称')"
        label="昵称"
        prop="name"
        width="200"
        align="center"
      />
      <el-table-column
        v-if="recordOption.includes('金额')"
        label="金额"
        prop="name"
        width="100"
        align="center"
      />
      <el-table-column
        v-if="recordOption.includes('到账金额')"
        label="到账金额"
        prop="name"
        width="100"
        align="center"
      />
      <el-table-column
        v-if="recordOption.includes('支付平台')"
        label="支付平台"
        prop="name"
        width="100"
        align="center"
      />
      <el-table-column
        v-if="recordOption.includes('支付单号')"
        label="支付单号"
        prop="name"
        width="100"
        align="center"
      />
      <el-table-column
        v-if="recordOption.includes('支付时间')"
        label="支付时间"
        prop="time"
        width="200"
        align="center"
      />
      <el-table-column
        v-if="recordOption.includes('备注')"
        label="有效期"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}备注</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="recordOption.includes('添加时间')"
        label="添加时间"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}2023-06-19 14:36:00</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />

  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
        name: undefined,
      },
      total: 1,
      loading: false,
      list: [{ id: 1 }, { id: 2 }],
      checkedOption: [],
      isrefresh: false,
      selectoptions: [
        { id: 1, label: "ID" },
        { id: 2, label: "状态" },
        { id: 3, label: "订单号" },
        { id: 4, label: "会员" },
        { id: 5, label: "昵称" },
        { id: 6, label: "金额" },
        { id: 7, label: "到账金额" },
        { id: 8, label: "支付平台" },
        { id: 9, label: "支付单号" },
        { id: 10, label: "支付时间" },
        { id: 11, label: "备注" },
        { id: 12, label: "添加时间" },
      ],
      dialogAddVisible: false,
      multiple: true,
      isadd: true,
      title: "",
      row: null,
      levelList: [
        { label: "免费版", value: 1 },
        { label: "专业版", value: 2 },
        { label: "旗舰版", value: 3 },
      ],
      timeList: [
        { label: "1个月", value: 1 },
        { label: "一个季度", value: 2 },
        { label: "一年", value: 3 },
      ],
      dialogVisible:false,
      form: {},
      rules:{
        level: [
          { required: true, message: "请选择会员等级", trigger: "change" },
        ],
        time: [{ required: true, message: "请选择有效期", trigger: "change" }]
      },
      dialogCzVisible:false,

      dialogQdVisible:false,
      // 日志
      // dialoglogVisible: false,
      // rowId: "",
      // 预览
      // dialogView: false,
    };
  },

  props: {
    type: {
      type: Number,
      default: 1,
    },
  },

  // components: {
  //   AddMember,
  //   CzMember,
  //   QdTable
  //   // FabuComp,
  //   // LogTable,
  //   // ViewComp,
  // },

  computed: {
    ...mapState({
      recordOption: (state) => state.paramsoption.recordOption,
    }),
  },

  created() {
    let recordOption = JSON.parse(localStorage.getItem("recordOption"));
    if (recordOption) {
      this.changeSelect(recordOption);
    }
    this.checkedOption = this.recordOption;
  },

  methods: {
    getList() {
      this.loading = true;
      let params = { ...this.queryParams };
      //   if(this.queryParams.type=='创建日期' && this.time && this.time.length){
      //     params.startime = this.time[0]
      //     params.endtime = this.time[1]
      //   }
      //   feedbacklist(params).then((response) => {
      //     this.tableData = response.data.list;
      //     this.total = response.data.count;
      //     this.loading = false;
      //   });
      this.isrefresh = false;
      this.loading = false;
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.isrefresh = true;
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleSelectionChange(selection) {
      this.rowids = selection.map((item) => item.id);
      // this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.id || this.rowids;
      this.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项？').then(function() {
        return delLogininfor(infoIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    changeSelect(arr) {
      this.$store.commit("SET_MEMBEROPTION", arr);
      this.$nextTick(() => {
        //在数据加载完，重新渲染表格
        this.$refs.tablelayout && this.$refs.tablelayout.doLayout();
      });
    },

    handleCommand(command) {
      console.log(command);
    },

    

    handleEdit(row) {
      this.row = row;
      this.isadd = false;
      this.dialogAddVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.iconbox {
  width: 32px;
  height: 26px;
}
</style>
